<template>
  <div class="app-container">


    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="teacherQuery.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacherQuery.level" placeholder="讲师头衔">
          <el-option label="高级讲师" :value="1"></el-option>
          <el-option label="首席讲师" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-col :span="11">
          <el-form-item  prop="teacherQuery.begin">
            <el-date-picker type="date" placeholder="开始日期" v-model="teacherQuery.begin" style="width: 100%;"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="11">
          <el-form-item prop="teacherQuery.end">
            <el-date-picker placeholder="结束时间" v-model="teacherQuery.end" style="width: 100%;"
              value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-upload
                      ref="upload"
                      :action="'http://localhost:8001/eduservice/edu-teacher/inssertallexcel'"
                      :format="['xlsx','xls']"
                      :max-size="2048"
                      :on-exceeded-size="handleMaxSize"
                      :before-upload="beforeUpload"
                      :on-success="handleSuccess"
                      :show-upload-list="false"
                      :headers="headers"
                      :on-error="errrorimport"
                      style="width:58px;"
                    >
          <el-button  type="primary">批量新增</el-button>


        </el-upload>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 3rem;" type="primary" @click="getList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addteacher()">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="el-icon-download" @click='exportexcel()'>导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
     :data="list.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope='scope'>
          {{(page-1)*limit+scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center">
      </el-table-column>
      <el-table-column label="头像" align="center" width="60">
        <template slot-scope='scope'>
          <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
        </template>
        <!-- <el-avatar :size="50" :src="prop"></el-avatar> -->
      </el-table-column>
      <el-table-column label="头衔" align="center">
        <template slot-scope='scope'>
          {{scope.row.level===1?'高级讲师':'首席讲师'}}
        </template>
      </el-table-column>
      <el-table-column label="讲师资历" prop="career" align="center">
      </el-table-column>
      <el-table-column label="创建时间" prop="gmtCreate" align="center">
      </el-table-column>
      <el-table-column align="right">
        <!-- <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template> -->
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/'+scope.row.id">
            <el-button icon="el-icon-edit" size="mini" @click="handleEdit()">修改</el-button>
          </router-link>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="getList" :current-page.sync="page" :page-size="limit"
      layout="total,prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  //  引入调用teacher.js文件
  import teacher from '@/api/edu/teacher'
  import fileDownload from 'js-file-download'
  export default {
    //  写核心代码的位置
    // data:{
    // },
    data() { //  定义变量和初始值
      return {
        list: null, //  查询之后接口返回集合
        page: 1,
        limit: 8,
        total: 0, //  总记录数
        teacherQuery: {} ,//  条件封装对象
         multipleSelection: []
      }
    },
    created() { //  在页面渲染之前执行，一般调用methods定义的方法
      this.getList()
    },
    methods: { //  创建具体的方法，调用teacher.js定义的方法
      //  讲师列表的方法
      getList(page = 1) {
        this.page = page
        teacher.getTeacherListPage(this.page, this.limit, this.teacherQuery)
          .then(response => {
            //  response 接口返回的数据
            // console.log(response)
            this.list = response.data.rows
            this.total = response.data.total
            console.log(this.list)
            console.log(this.total)
          }) // 请求成功
          .catch(error => {
            console.log(error)
          }) //  请求失败
      },
      resetForm() {
        this.teacherQuery = {}
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该讲师, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          teacher.deleteTeacherByid(id)
            .then(response => {
              //  提示信息

              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //  重新刷新
              this.getList()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

        // .catch()
      },
      addteacher() {
        this.$router.push({
          path: '/teacher/save'
        })
      },
      exportexcel(){

        teacher.exportteacherexcel()
        .then(response => {
                        const blob = new Blob([response.data], {
                            type: 'application/vnd.ms-excel'
                        })
                        console.log('blob',blob)
                        if ('download' in document.createElement('a')) {
                            // 非IE下载
                            const elink = document.createElement('a')
                            elink.download = 'jj.xlsx'
                            elink.style.display = 'none'
                            elink.href = URL.createObjectURL(blob)
                            document.body.appendChild(elink)
                            elink.click()
                            URL.revokeObjectURL(elink.href)
                            document.body.removeChild(elink)
                        } else {
                            // IE10+下载
                            navigator.msSaveBlob(blob, 'jj.xlsx')
                        }
                        resolve()
                    })
                    .catch(error => {
                        console.log(error)
                        reject(error)
                    })
      },
      // //批量导入讲师
      beforeUpload(){

      },
          handleMaxSize(file) {
            this.$Notice.warning({
              title: "文件大小限制",
              desc: "文件 " + file.name + "太大,不能超过 2M."
            });
          },
          handleSuccess(res, file) {
            // if(this.$refs.upload.submit()){
              console.log('res',res)
              if(res.data.success){
                this.$message({
                  type: 'success',
                  message: '导入成功'
                });
              }else{
                this.$message({
                  type: 'error',
                  message: '导入失败'
                });
              }

            // }else {
            //   this.$message({
            //     type: 'error',
            //     message: '导入失败'
            //   });
            // }
          },
          errrorimport(res, file){
            this.$message({
              type: 'error',
              message: '导入失败 请检查文件格式(.xlsx .xls)'
            });
          },
          importexcel(){
            this.importexcelflag=true
          }


    }
  }
</script>

<style>
</style>
